<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/views/common/taglibs.jsp" %>
<%@ include file="/WEB-INF/views/common/head.jsp" %>

<html>

<head>
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="wrw"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>确认订单</title>
    <link id="link1" rel="stylesheet" href="${webRoot}static/app/css/public.css?v=8565"/>
    <link id="link2" rel="stylesheet" href="${webRoot}static/app/css/style.css?v=288"/>
    <script type="text/javascript" src="${webRoot }static/js/jquery/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="${webRoot }static/common/layer_mobile/need/layer.css"/>
    <script type="text/javascript" src="${webRoot }static/common/layer_mobile/layer.js"></script>
    <style>
        .spje {
            position: absolute;
            color: red;
            right: 15px
        }

        .oprice {
            line-height: 40px;
            top: 8px;
            right: 5px;
            position: absolute;
        }
        .disable {
            background: #dbdbdb;
        }
    </style>
</head>

<body style="background-color: #F2F2F2;">
<header>
    <div class="navtitle">
        <%--javascript:history.back(-1)--%>
        <a href="javascript:history.back(-1)" >
					<span style=" float: left;"><i class="icon-href">&#x4a;</i>
					</span>
        </a>
        <span class="n-title">确认订单</span>
        <%--<a href="index.html"><span style="float: right; margin-right: 10px;">--%>
        <%--<i class="icon-href">&#xe009;</i>--%>
        <%--</span>--%>
        <%--</a>--%>
    </div>
</header>
<section class="whitebg orAddress" style="margin-top: 45px;">
    <ul>
    </ul>
</section>
<section class="whitebg detail">
    <h3 class="h3 orderTit">商品详情</h3><span class="number">共${orders.totalcount}件商品</span>
    <ul class="plist2" style="margin-top: 5px;">
        <c:forEach items="${orderInfos}" var="info">
            <li>
                <div class="conImg"><img src="${webRoot}static/${info.picurl}" width="80px" height="80px"></div>

                <div class="content">
                    <p>${info.foodname}</p>
                    <p class="oprice" style=" font-size: 16px;">￥${info.foodprice}</p>
                    <p class="feature">${info.feature}</p>
                    <div class="num">
                        &#10005 ${info.number}
                    </div>

                </div>
            </li>
        </c:forEach>
    </ul>
</section>
<section class="whitebg orAddress">
    <h3 class="h3 orderTit">支付方式</h3>
    <ul class="pay">
        <%--<li>--%>
        <%--<em><img src="img/weixin.png" width="30px" height="30px"/></em>--%>
        <%--<em style="vertical-align: text-bottom">微信支付</em>--%>
        <%--<i class="icon-href redtip">&#x56;</i>--%>
        <%--</li>--%>
        <li>
            <em><img src="${webRoot}/static/app/images/weixin.png" width="30px" height="30px"/></em>
            <em style="vertical-align: text-bottom">微信支付</em>
            <i class="icon-href redfont">&#x5a;</i>
        </li>
    </ul>
</section>
<section class="whitebg">
    <h5 class="h5 orderTit">商品金额&nbsp;&nbsp;<a class="spje" href="#">￥${orders.totalprices}</a></h5>
    <h5 class="h5 orderTit">已优惠&nbsp;&nbsp;<a class="spje" href="#">-￥0.00</a></h5>
    <h5 class="h5 orderTit">合计&nbsp;&nbsp;<a class="spje" style="color:red;" href="#">￥${orders.totalprices}</a></h5>
</section>
<section>
    <div class="btngroup">

            <div style="display: inline-block;">
                共购买 ${orders.totalcount} 件，实付款：<span class="redfont"
                                                     style="font-weight: bold;">${orders.totalprices}元</span>
            </div>
            <a href="#">
                <a href="#">
                    <button id="payBtn" class="tip-btn orange" style="width: 23%; ">确认支付</button>
                </a>
            </a>

    </div>
</section>
<%--<button onclick="test()">test</button>--%>
</body>
<script type="text/javascript">
    function test() {
        $('#payBtn').attr("disabled","disabled");
        $("#payBtn").removeClass("orange");
        $("#payBtn").addClass("disable");
        $("#payBtn").html("交易关闭");
    }
    $(function () {
        var total_sum = '${orders.totalprices}'
        $(".tip-btn").click(function () {
            pay();

        })
    })

</script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "post",
            url: '${webRoot}wxpay/order_state',
            dataType: "json",
            data: {orderId:'${orders.orderid}'},
            success: function (data) {
                if(data.result){
                    $('#payBtn').attr("disabled","disabled");
                    $("#payBtn").removeClass("orange");
                    $("#payBtn").addClass("disable");
                    $("#payBtn").html(data.msg);
                }
            }
        })
    });
    <%--data: {openId: '${openId}',orderid:'${orders.orderid}'},--%>
    var prepay_id;
    var paySign;
    var appId;
    var timeStamp;
    var nonceStr;
    var packageStr;
    var signType;
    function pay() {
        var loading = layer.open({type: 2});
        var url = '${webRoot}wxpay/jspay';
        $.ajax({
            type: "post",
            url: url,
            dataType: "json",
            data: {openId: '${openId}',orderId:'${orders.orderid}'},
            success: function (data) {
                layer.close(loading);
                if (data.resultCode == 'SUCCESS') {
                    appId = data.data.appId;
                    paySign = data.data.paySign;
                    timeStamp = data.data.timeStamp;
                    nonceStr = data.data.nonceStr;
                    packageStr = data.data.package;
                    signType = data.data.signType;
                    callpay();
                } else {
//                    layer.alert(data.data);
                    //信息框
                    layer.open({
                        content: data.data,
                        btn: '确定'
                    });
                }
            }
        });
    }

    function onBridgeReady() {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": appId,     //公众号名称，由商户传入
                    "paySign": paySign,         //微信签名
                    "timeStamp": timeStamp, //时间戳，自1970年以来的秒数
                    "nonceStr": nonceStr, //随机串
                    "package": packageStr,  //预支付交易会话标识
                    "signType": signType     //微信签名方式
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        $('#payBtn').attr("disabled","disabled");
                        $("#payBtn").removeClass("orange");
                        $("#payBtn").addClass("disable");
                        $("#payBtn").html("交易已完成");
                        window.location.replace("${webRoot}wxpay/success?openId=${openId}&orderId=${orders.orderid}&time="+timeStamp);
//                        alert('支付成功');
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        $.ajax({
                                    type: "post",
                                    url: '${webRoot}wxpay/fail',
                                    dataType: "json",
                                    data: {orderId:'${orders.orderid}'},
                                    success: function (data) {
                                        $('#payBtn').attr("disabled","disabled");
                                        $("#payBtn").removeClass("orange");
                                        $("#payBtn").addClass("disable");
                                        $("#payBtn").html("交易关闭");
                                        alert('支付取消');
                                    }
                        })
                    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                        $.ajax({
                            type: "post",
                            url: '${webRoot}wxpay/fail',
                            dataType: "json",
                            data: {orderId:'${orders.orderid}'},
                            success: function (data) {
                                $('#payBtn').attr("disabled","disabled");
                                $("#payBtn").removeClass("orange");
                                $("#payBtn").addClass("disable");
                                $("#payBtn").html("交易关闭");
                                alert('支付失败');
                            }
                        })
                    } //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                }
        );
    }
    function callpay() {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    }
</script>


</html>
